<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		html,body{
			padding: 0;
			margin: 0;
			overflow: hidden;
			height: 100%;
		}
		.clear:after{
			content: "";
			display: block;
			clear: both;
			font-size: 0;
			line-height: 0;
		}
		canvas{ 
			height: 100%;
			width: 100%;
			background-image: url("");

		}
		.tool{
			height: 40px;
			position: relative;
			z-index: 1;
			line-height: 40px;
			background-color: #fff;

		}
		.tool span{
			display: inline-block;
			width: 30px;
			height: 30px;
			text-align: center;
			margin-top:5px;
			margin-left:10px;
		} 
		.tool span img{
			pointer-events: none;
		}


		#qcanvas_lay{
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			bottom: 0;
			overflow:scroll;
		}
		.sheetLay{
			font-size: 12px;
			position: absolute;
			bottom: 0;
			left:0;
			background: #fff;

		}
		.save,
		.download
		{
			float: right;
			font-size: 12px;
		}
		#titleInput,
		#lineTitleInput,
		#containerGridColumn,
		#lineLike{
			position: absolute;
			left:0;
			top:0;
			padding: 0;
			margin:0;
			border:none;
			text-indent: 5px;
			font-size: 12px;
		}
		#tip{
			position: absolute;
		    z-index: 1;
		    padding:0;
		    margin:0;
		    outline: none;
		    display: none;
		    font-family:'Microsoft YaHei';
		    /* font-family: 'Arial'; */
			word-break: break-all;
		    border:transparent;
		    overflow: hidden; 
		    background: rgba(0,0,0,0);
		    resize:none;
		    /*pointer-events: none;*/
		}
		#qflow_lay{ 
			height: 100%;
			width: 100%;
			position: relative;
		}
	</style>
</head>
<body> 
 

	<div id="qflow_lay">
		<div class="tool">
			<span class="drag_ele" data-id="-1">
				<img src="" height="20" alt="" draggable="false">
			</span>
			<span class="drag_ele" data-id="1">
				<img src="" height="20" alt="" draggable="false">
			</span>
			<span class="drag_ele" data-id="2">
				<img src="" height="20" alt="" draggable="false">
			</span>



			<span class="save" @click="save">
				<img src=""
				height="20" alt="" draggable="false">

			</span>
			<span class="download" @click="download">
				<img src="" height="20" alt="" draggable="false">
			</span>
		</div>
		<div id="qcanvas_lay">
			<canvas id="qcanvas"></canvas>
			<input type="text" id="titleInput" v-model="nodeTitle" @input="modiTitle" autocomplete="off">
			<input type="text" id="containerGridColumn" v-model.number="containerGridColumn" @input="modiContainerGridColumn" autocomplete="off">
			<textarea name="" id="tip" v-model="tipText" @input="modTip($event)"></textarea>
			<input type="text" id="lineTitleInput" v-model="lineNodeTitle" @input="modiLineTitle" autocomplete="off">
			<select id="lineLike" v-model="lineLike" @change="modiLineLike" autocomplete="off">
				<option v-for="item in lineStyleList" :value="item.value">{{item.name}}</option> 
			</select>

			<div class="sheetLay">
				<span v-for="item in sheets">{{item.name}}</span>
			</div>
		</div>
	</div>
	

</body>
<script src='../Qcanvas.js'></script>
<script src='js/Drag.js'></script>
<script src='js/Qflow.js'></script>
<script src="js/mock.js"></script>
<script src="js/vue.js"></script>

<script> 
	
	
	  var qflow;
	  var v =	new Vue({
		  el: '#qflow_lay',
		  data: {
		  	curr:0,
		  	sheets:[
		  		{
		  			name:'sheet1',
		  		}
		  	],
  			nodeTitle:'',
  			lineNodeTitle:'标题',
  			lineLike:'',
  			lineStyleList:[
  				{
  					name:'-',
  					value:'-'
  				},
  				{
  					name:'->',
  					value:'->'
  				},
  				{
  					name:'<->',
  					value:'<->'
  				},
  				{
  					name:'--',
  					value:'--'
  				},
  				{
  					name:'-->',
  					value:'-->'
  				},
  				{
  					name:'<-->',
  					value:'<-->'
  				},
  			],
  			containerGridColumn:1,
  			tipText:''

		  },
		  methods:{
		  	download:function(){
		  		qflow.download();
		  	},
		  	save:function(){
		  		// console.log(qflow.options.initData);

		  		console.log(qflow.returnSaveData());
		  	},	
		  	modiTitle:function(){
		  		qflow.modiTitle(this.nodeTitle);
		  	},
		  	modiLineTitle:function(){
		  		qflow.modiLineTitle(this.lineNodeTitle);
		  	},
		  	modiLineLike:function(){
		  		qflow.modiLineLike(this.lineLike);
		  	},
		  	modTip:function(e){
		  		var elem = e.target;
		  		elem.style.height = 'auto';
	            elem.scrollTop = 0; //防抖动
	            elem.style.height = elem.scrollHeight + 'px'; 

	            qflow.updateTipText(elem.value,parseInt(elem.style.height));

		  		// console.log(this.tipText);
		  		// var tip = document.getElementById('tip');
		  		// tip.style.height = tip.scrollTop + tip.scrollHeight + "px";

		  		// this.tipText = this.tipText.replace(/ /g, '');

		  		// // qflow.updateTipText(this.tipText.replace(/\r\n/g, '\n'),parseInt(tip.style.height));
		  		// qflow.updateTipText(this.tipText.replace(/\r\n/g, ''),parseInt(tip.style.height));


		  	},
		  	modiContainerGridColumn:function(){

		  		if(this.containerGridColumn =='' || 
		  			this.containerGridColumn ==0){

		  			return false;
		  		} 
			  	qflow.modiContainerGridColumn(this.containerGridColumn);
		  		

		  	},
		  	init:function(){
		  		qflow = new Qflow({
					id:'qcanvas',
					width:document.body.offsetWidth,
					height:document.body.offsetHeight,
					// width:1000,
					// height:500,
					initData:jsonData[this.curr]
					// initData:null
					});

				new Drag({ 
			          dragAimClass:"drag_ele",
			          moveFun:(x,y)=>{ 
			          	// console.log(x,y);
			          },
			          upFun:(obj)=>{ 
			          	if(obj.y > 40 && obj.x>0){

			          		//转换到画布的坐标
			          		obj.y +=document.getElementById('qcanvas_lay').scrollTop;
			          		obj.x +=document.getElementById('qcanvas_lay').scrollLeft;

				 			qflow.addEle(obj);
			          	}

			          }
			      })
		  	}
		  },
		  mounted(){

		  	this.init();

		  }
		})

</script>


</html>